<template>
  <div class="main_spac1 maincl">
    <div class="main_white padding10">
      <div class="mainor_form">
        <el-form
          :inline="true"
          :model="form"
          class="demo-form-inline"
          ref="searchForm"
          label-width="80px"
        >
          <el-form-item label="所属菜单">
            <el-cascader
              :options="menuList"
              :props="props"
              class="wid200"
              @change="selectAction($event, 'menu')"
              v-model="menuIds"
            ></el-cascader>
          </el-form-item>

          <el-form-item label="标题">
            <el-input
              v-model.trim="form.title"
              placeholder="标题"
              clearable
              class="wid200"
            ></el-input>
          </el-form-item>

          <el-form-item label="作者">
            <el-input
              v-model.trim="form.author"
              placeholder="作者"
              clearable
              class="wid200"
            ></el-input>
          </el-form-item>
          <el-form-item label="发布状态">
            <el-radio-group v-model="form.status">
              <el-radio label="0">未发布</el-radio>
              <el-radio label="1">已发布</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="创建时间">
            <el-date-picker
              v-model="form.created_at"
              value-format="timestamp"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-button
            @click="editAction()"
            class="marginLeft10"
            type="primary"
            style="float: right"
            >新增手册</el-button
          >
          <div class="clearfix"></div>
          <el-form-item class="marginTop10">
            <el-button
              class="reset marginLeft10"
              type="primary"
              @click="reset()"
              >重置</el-button
            >
            <el-button
              type="primary"
              @click="searchAction"
              :loading="listLoading"
              >搜索</el-button
            >
          </el-form-item>
        </el-form>
      </div>

      <div class="main_table" style="min-height: 590px">
        <el-table
          ref="multipleTable"
          v-loading="listLoading"
          :data="list"
          element-loading-text="加载中"
          fit
          border
          highlight-current-row
        >
          <el-table-column type="selection" />

          <el-table-column prop="id" label="ID" width="80" :sortable="true" />

          <el-table-column
            label="客户类型"
            width="100"
            prop="type"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              {{ scope.row.company_type.name }}
            </template>
          </el-table-column>

			<el-table-column prop="product.name" label="产品"  :sortable="true" />

          <el-table-column
            label="所属菜单"
            width="150"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              {{
                scope.row.first_menu_id == 0
                  ? "首页"
                  : scope.row.first_menu_id == -1
                  ? ""
                  : scope.row.sec_menu_id == -1
                  ? scope.row.menu_first.name
                  : scope.row.menu_first.name + "/" + scope.row.menu_sec.name
              }}
            </template>
          </el-table-column>

          <el-table-column
            prop="title"
            label="标题"
            :show-overflow-tooltip="true"
          />

          <el-table-column
            label="发布状态"
            prop="status"
            :show-overflow-tooltip="true"
            :sortable="true"
          >
            <template slot-scope="scope">
              <span
                :style="{
                  color: scope.row.status == 1 ? '#03A98E' : '#F56C6C',
                }"
              >
                {{ scope.row.status == 1 ? "正常" : "禁用" }}
              </span>
            </template>
          </el-table-column>

          <el-table-column
            label="查看次数"
            prop="view_num"
            :show-overflow-tooltip="true"
            :sortable="true"
          >
          </el-table-column>

          <el-table-column
            label="作者"
            prop="author"
            :show-overflow-tooltip="true"
          />

          <el-table-column
            label="创建时间"
            :show-overflow-tooltip="true"
            width="120"
          >
            <template slot-scope="scope">{{
              parseTime(scope.row.created_at, "{y}-{m}-{d}")
            }}</template>
          </el-table-column>

          <el-table-column fixed="right" label="操作" width="180">
            <template slot-scope="scope">
              <el-link @click="detailAction(scope.row.id)" type="warning">查看</el-link>
              <el-link @click="editAction(scope.row.id)" type="primary">编辑</el-link>
              <el-link @click="delAction(scope.row.id)" type="danger">删除</el-link>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="main_page boxdq">
        <div></div>
        <!-- 分页 -->
        <div class="main_page_r">
          <el-pagination
            :current-page="current.page"
            :page-sizes="[20, 30, 50, 100]"
            :page-size="limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalCount"
            background
            @size-change="changeLimit"
            @current-change="changePage"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  companyManualList,
  delCompanyManual,
  companyManualBaseData,
} from "@/api/document/document";
import { menuType } from "@/api/user/userMenu";
import { apiUrl, objKeySort, Md5 } from "@/utils/public";
import { parseTime } from "@/utils/index";

export default {
  data() {
    return {
      serveTime: "",
      detail: {}, //详情
      // 时间
      parseTime,
      // 分页
      current: {
        page: 1,
        per_page: 20,
        document_type:1,
      },
      limit: 20,
      totalCount: 1,
      // 搜索
      form: {},
      // 列表数据
      list: [],
      listLoading: false,
      menuList: [], //菜单列表
      menuIds: [], //所属菜单
      props: {
        children: "selfNext",
        label: "name",
        value: "id",
        expandTrigger: "hover",
        checkStrictly: true,
      },
    };
  },
  mounted(options) {
    this.getData();
  },
  beforeRouteLeave(to, from, next) {
    if(to.name=='document_document_detail' || to.name=='document_document_edit'){
      to.meta.navigation = '/document/document'
    }
    next();
  },
  methods: {
    //编辑
    editAction(id) {
      if (id) {
        this.$router.push({ path: "/document/documentEdit", query: { id,type:1 } });
      } else {
        this.$router.push({ path: "/document/documentEdit",query:{type:1} });
      }
    },
    delAction(id) {
      this.$confirm("是否删除手册?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let data = Object.assign(
            {
              sign: Md5(
                objKeySort(Object.assign(apiUrl().name, { id })) +
                  apiUrl().appsecret
              ),
            },
            apiUrl().name,
            { id }
          );
          delCompanyManual(data).then((res) => {
            if (res.errcode == 0) {
              this.$message({
                message: "删除成功",
                type: "success",
              });
              this.current.page = 1;
              this.getData();
            } else {
              this.$message.error(res.errmsg);
            }
          });
        })
        .catch(() => {});
    },
    detailAction(id){
       this.$router.push({ path: "/document/documentDetail", query: {id,type:1} });
    },
    // 搜索
    searchAction() {
      this.current.page = 1;
      this.getData();
    },
    // 分页
    changeLimit(pageSize) {
      this.current.per_page = pageSize;
      this.getData();
    },
    changePage(page) {
      this.current.page = page;
      this.getData();
    },
    // 获取列表
    getData() {
      this.listLoading = true;
      var search = this.list_form();
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name, search, this.current)) +
              apiUrl().appsecret
          ),
        },
        apiUrl().name,
        search,
        this.current
      );
      companyManualList(data).then((res) => {
        this.listLoading = false;
        if (res.errcode == 0) {
          this.menuList = res.data.company_menu_list;
          this.list = res.data.list.data;
          this.totalCount = res.data.list.total;
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    list_form() {
      let form = {};
      for (let i in this.form) {
        if (this.form[i] != "") {
          form[i] = this.form[i];
        }
      }
      if (form.created_at) {
        // if (form.created_at[0] == form.created_at[1]) {
        //   form.created_at[1] += 60 * 60 * 24 * 1000;
        // }
        form.created_at = `${form.created_at[0] / 1000},${
          form.created_at[1] / 1000
        }`;
      }
      return form;
    },
    reset() {
      this.form = {};
      this.menuIds = [];
      this.getData();
    },
    selectAction(e, type) {
      // console.log("选择", e);
      if (type == "menu") {
        this.form.type = e[0];
        e[1] ? this.form.product_type = e[1] : null;
        e[2] ? this.form.first_menu_id = e[2] : null;
        e[3] ? this.form.sec_menu_id = e[3] : null;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/styles/variables.scss";
.maincl {
  .el-select {
    width: 114px;
  }
  .more {
    margin-left: 50px;
  }
  .handle_btn {
    padding: 0;
    border: 0;
    & + .handle_btn {
      margin-left: 20px;
    }
    &.del {
      color: #f78989;
    }
  }
  .edit_dialog {
    .address {
      max-width: 350px;
    }
  }

  .mainor_form form {
    // width: calc(100% - 180px);
    width: 100%;
  }

  .main_table /deep/.el-table--small td {
    padding: 10px 0;
  }
  .main_table /deep/.el-table--small th {
    padding: 10px 0;
  }

  /deep/.el-table {
    tr {
      &:hover {
        background: none !important;
      }
      &.hover-row > td {
        background: none !important;
      }
      .current-row > td {
        background: none !important;
      }
    }
  }
  /deep/.el-table .el-table__body tr:hover {
    background: #fff !important;
  }
  /deep/.el-table .el-table__body tr:hover > td {
    background: #fff !important;
  }
  /deep/.el-table tr.expanded + tr {
    background: #fafafa !important;
  }
  /deep/.el-table tr.expanded + tr > td {
    background: #fafafa !important;
  }
  /deep/.el-table tr.expanded + tr .mainex_ta {
    background: #fafafa !important;
  }
  /deep/.el-table tr.expanded + tr .mainex_ta th,
  /deep/.el-table tr.expanded + tr .mainex_ta tr {
    background: #fafafa !important;
  }
  /deep/.el-table tr.expanded + tr:hover {
    background: #fafafa !important;
  }
  /deep/.el-table tr.expanded + tr:hover > td {
    background: #fafafa !important;
  }
  /deep/.el-table tr.expanded + tr .el-table tr:hover {
    background: #fafafa !important;
  }
  /deep/.el-table tr.expanded + tr .el-table tr:hover > td {
    background: #fafafa !important;
  }
}
</style>
